Style Customization

Midone use SASS as a default css preprocessing, you can found all the SASS files in one single place at /sass/* directory. Every single component SASS file are imported in /sass/app.scss. You can modify this file to add or remove components depends to your needs. Here is the part things you need to know about the /sass/app.scss structure and functions.

• Fonts: This section is supposed to import all the template used fonts.
• Breakpoint: This file is contains screen breakpoint variables that used by the template components.
• 3rd Parties: This section supposed to import all 3rd parties SASS or CSS files.
• Animations: This section supposed to import all custom animations used by the template.
• Components: This section supposed to import all component SASS files used by the template.

  // Fonts @import 'fonts/roboto'; // Breakpoint @import 'breakpoint'; // 3rd Parties @import '~slick-carousel/slick/slick'; @import '~slick-carousel/slick/slick-theme'; @import '~highlight.js/scss/github'; @import '~tooltipster/dist/css/tooltipster.bundle.min'; @import '~tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min'; @import '~tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-borderless.min'; @import '~daterangepicker/daterangepicker'; @import '~select2/src/scss/core'; @import '~dropzone/src/dropzone'; // Animations @import 'typing-dots'; @import 'zoom-in'; @import 'intro'; // Components @import 'top-bar'; @import 'app'; @import 'login'; @import 'mini-chat-box'; @import 'mini-chat-list'; @import 'mini-chat'; @import 'table'; @import 'table-report'; @import 'report-timeline'; @import 'report-chart'; @import 'search'; @import 'input'; @import 'button'; @import 'notification'; @import 'image-fit'; @import 'box'; @import 'report-box'; @import 'global'; @import 'content'; @import 'top-nav'; @import 'side-nav'; @import 'breadcrumb'; @import 'tailwind'; @import 'top-bar-boxed'; @import 'mobile-menu'; @import 'pagination'; @import 'dropdown'; @import 'modal'; @import 'tab'; @import 'checkbox'; @import 'file'; @import 'inbox-filter'; @import 'inbox'; @import 'scrollbar'; @import 'chat'; @import 'boxed-tabs'; @import 'chat-dropdown'; @import 'wizard'; @import 'blog'; @import 'news'; @import 'pricing-tabs'; @import 'accordion'; @import 'error-page'; @import 'tooltip'; @import 'datatable-wrapper'; @import 'datepicker'; @import 'select2'; @import 'summernote'; @import 'slick'; @import 'jquery-validation'; @import 'slick'; @import 'source-preview'; @import 'search-result'; @import 'notification-content';